<template>
  <div class="hot-playlists">
    <div class="header">
      <h2>热门歌单</h2>
    </div>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <div v-else class="carousel-container">
      <!-- 轮播内容 -->
      <div class="carousel" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div 
          v-for="playlist in hotPlaylists" 
          :key="playlist.id" 
          class="carousel-item"
          @click="goToPlaylist(playlist.id)"
        >
          <div class="playlist-card">
            <div class="card-image">
              <img :src="playlist.cover" :alt="playlist.name">
            </div>
            <div class="card-content">
              <h3 class="playlist-title">{{ playlist.name }}</h3>
              <p class="playlist-desc">{{ playlist.description || '暂无描述' }}</p>
              <div class="creator-info">
                <span class="name">by {{ playlist.userName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 轮播指示器 -->
      <div class="carousel-indicators">
        <span 
          v-for="index in Math.ceil(hotPlaylists.length / 3)" 
          :key="index - 1"
          class="indicator"
          :class="{ active: currentIndex === index - 1 }"
          @click="currentIndex = index - 1"
        ></span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getHotPlaylists } from '@/api/playList';
import type { PlayList } from '@/api/playList';

const router = useRouter();
const hotPlaylists = ref<PlayList[]>([]);
const error = ref('');
const loading = ref(true);
const currentIndex = ref(0);
const itemsPerView = 3; // 每页显示3个

const maxIndex = computed(() => 
  Math.ceil(hotPlaylists.value.length / 3) - 1
);

const nextSlide = () => {
  if (currentIndex.value < maxIndex.value) {
    currentIndex.value++;
  }
};

const prevSlide = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

// 自动轮播
let autoplayInterval: ReturnType<typeof setInterval>;
const startAutoplay = () => {
  autoplayInterval = setInterval(() => {
    if (currentIndex.value === maxIndex.value) {
      currentIndex.value = 0;
    } else {
      nextSlide();
    }
  }, 5000);
};

const stopAutoplay = () => {
  clearInterval(autoplayInterval);
};

const fetchHotPlaylists = async () => {
  try {
    const response = await getHotPlaylists(9); // 获取9个热门歌单
    if (response.success && response.playlists) {
      hotPlaylists.value = response.playlists;
      startAutoplay();
    } else {
      error.value = response.message;
    }
  } catch (err) {
    error.value = '获取热门歌单失败';
  } finally {
    loading.value = false;
  }
};

const goToPlaylist = (id: string) => {
  router.push(`/playlist/${id}`);
};

onMounted(fetchHotPlaylists);
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.hot-playlists {
  padding: 24px;
  border-radius: 20px;
  color: var(--primary-color);
}

.carousel-container {
  position: relative;
  overflow: hidden;
  padding: 0 24px;
}

.carousel {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.carousel-item {
  flex: 0 0 33.333%;
  padding: 0 12px;
  box-sizing: border-box;
  padding-top: 20px;
  padding-bottom: 6px;
}

.playlist-card {
  position: relative;
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: color-mix(in srgb, var(--bgc-color-2) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 10%, transparent);
  box-shadow: 0 4px 16px var(--theme-shadow);
  transform-origin: center bottom;

  &:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: color-mix(in srgb, var(--primary-color) 20%, transparent);
    box-shadow: 0 8px 24px var(--theme-shadow);
    
    .card-image img {
      transform: scale(1.08);
    }
  }
}

.card-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bgc-color-1) 95%, transparent),
    transparent
  );
  backdrop-filter: blur(8px);
  color: var(--primary-color);
  z-index: 2;
}

.playlist-title {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--primary-color);
}

.playlist-desc {
  font-size: 0.9em;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-bottom: 12px;
  color: var(--primary-color);
}

.creator-info {
  display: flex;
  justify-content: flex-end;
  
  .name {
    font-size: 0.85em;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    padding: 4px 12px;
    border-radius: 20px;
    color: var(--primary-color);
    backdrop-filter: blur(4px);
  }
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.indicator {
  width: 28px;
  height: 3px;
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-radius: 1.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  &.active {
    width: 36px;
    background: var(--secondary-color);
  }
}

@media (max-width: 1024px) {
  .carousel-item {
    flex: 0 0 calc(50% - 12px);
  }
  
  .playlist-card {
    height: 280px;
  }
}

@media (max-width: 768px) {
  .carousel {
    gap: 16px;
  }

  .playlist-card {
    height: 240px;
  }

  .card-content {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .carousel-item {
    flex: 0 0 calc(100% - 24px);
  }
  
  .playlist-card {
    height: 200px;
  }
}
</style> 